<template>
  <div id="app1">
    <img src="../../../../../public/600.png" alt="Banner Image" class="banner-image" />
    <Header/>
<div class="template">
  <div>
    <select v-model="searchType">
      <option value="project">按项目检索</option>
      <option value="description">按描述检索</option>
      <option value="remark">按日期检索</option>
    </select>
    <input type="text" v-model="searchQuery" placeholder="输入检索内容..." />
  </div>
  <table>
    <thead>
      <tr>
        <th>项目</th>
        <th>描述</th>
        <th>备注</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in filteredItems" :key="index">
        <td>{{ item.project }}</td>
        <td>{{ item.description }}</td>
        <td>{{ item.remark }}</td>
        <td>
          <button @click="editItem(index)">修改</button>
          <button @click="deleteItem(index)">删除</button>
        </td>
      </tr>
    </tbody>
  </table>
  <div v-if="isEditing" class="edit-form">
    <h3>修改项目</h3>
    <input v-model="editProject" placeholder="项目名称" />
    <textarea v-model="editDescription" placeholder="项目描述"></textarea>
    <input v-model="editRemark" placeholder="备注" />
    <button @click="saveEdit">保存修改</button>
    <button @click="cancelEdit">取消</button>
  </div>
</div>
<Footer/>
</div>
</template>

<script>
import Header from '../components/Header.vue';
import Footer from '../components/Footer.vue';
export default {
components: {
  Header,
  Footer
},
data() {
  return {
    items: [
      {
        project: '中国居民健康素养监测系统',
        description: '通过定期开展健康素养监测，掌握居民健康素养水平，为制定健康政策提供依据。',
        remark: '2012年启动'
      },
      {
        project: '中国居民营养与健康状况监测',
        description: '监测居民营养与健康状况，评估营养改善措施效果。',
        remark: '2002年启动'
      },
      {
        project: '中国式现代化生态观的内涵及其生态哲学意义',
        description:
          '中国式现代化生态观不仅具有深刻的理论内涵，而且呈现出当代中国马克思主义生态哲学的理论形态。',
        remark: '2024-11-07'
      },
      {
        project: '探索中国式医疗保障制度',
        description:
          '三明医改为探索中国式医疗保障制度提供了地方经验和可行路径，也为世界各国医改贡献了可供借鉴的中国经验。',
        remark: '2024-10-30'
      },
      {
        project: '论脱贫攻坚的中国经验及其意义',
        description: '脱贫攻坚是新时代以来，中国共产党带领人民向我国深度贫困地区发起的攻坚战。',
        remark: '2021-08-12'
      },
      {
        project: '新中国成立初期防汛动员工作的困境与应对',
        description:
          '1948年,华北人民政府受中共中央委托，在河北省平山县召集各治河机构负责人开会，筹建治理黄河的统一管理机构。',
        remark: '2018-10-31'
      },
      {
        project: '我国社会保障法治建设40年回顾',
        description: '通过定期开展健康素养监测，掌握居民健康素养水平。',
        remark: '2018-11-14'
      },
      {
        project: '1963年海河水灾后的社会心态与心理救助',
        description:
          '在严重灾害冲击下，邢台专区受灾群众产生宗教迷信、自私本位等消极心态，致使人口外流、干群矛盾激化的现象发生。',
        remark: '2018-12-27'
      },
      {
        project: '改革开放我国就业发展经验及展望',
        description:
          '改革开放40年以来,中国经济持续快速发展,就业质量明显改善,劳动者素质不断提升,劳动力市场制度不断完善。',
        remark: ' 2019-01-08'
      },
      {
        project: '李文：我国改革开放以来的民生福祉增进',
        description: '改善民生是推动改革和发展的根本目的，也是中国共产党执政宗旨的本质要求。',
        remark: '2019-03-06'
      },
      {
        project: '中国农村合作医疗制度变迁',
        description:
          '中国农村合作医疗制度变迁，历经萌芽与生成—发展与繁荣—衰落与调适—重建与复兴—整合与合并五大发展阶段',
        remark: '2019-04-08'
      },
      {
        project: '中国社会保障税费之争三十年',
        description:
          '三十年税费之争，各方在国际比较、制度问题与税费性质辨析等方面在一定程度上达成了共识，但未尽之处依旧很多.',
        remark: ' 2020-01-02'
      },
      {
        project: '对口支援与当代中国的平衡发展',
        description: '1979年4月，对口支援政策在全国边防工作会议上正式提出、确认。',
        remark: '2019-12-30'
      },
      {
        project: '新中国社会治理的理论与实践',
        description:
          '新中国成立后,中国社会治理经历了3次理论与实践的跃迁,形成了当代中国特色社会主义社会治理体系。',
        remark: ' 2022-12-07'
      },
      {
        project: '印度教的起源和发展',
        description:
          '印度教也称新婆罗门教，它是在婆罗门教的基础上吸收印度民间信仰、佛教和耆那教等因素，发展起来的一系列宗教信仰。',
        remark: '2013-03-28'
      },
      {
        project: '抗美援朝中国志愿医疗队探析',
        description:
          '抗美援朝战争爆发后，党和政府根据朝鲜前线实际需要及时做出部署，号召广大医务人员组建志愿医疗队支援前线。',
        remark: '2024-06-27'
      }
      // ... 其他项目
    ],
    searchType: 'project', // 默认检索类型
    searchQuery: '',
    isEditing: false,
    editIndex: null,
    editProject: '',
    editDescription: '',
    editRemark: ''
  }
},
computed: {
  filteredItems() {
    const searchTypeMap = {
      project: 'project',
      description: 'description',
      remark: 'remark'
    }
    return this.items.filter(item =>
      item[searchTypeMap[this.searchType]].toLowerCase().includes(this.searchQuery.toLowerCase())
    )
  }
},
methods: {
  editItem(index) {
    this.isEditing = true
    this.editIndex = index
    this.editProject = this.items[index].project
    this.editDescription = this.items[index].description
    this.editRemark = this.items[index].remark
  },
  deleteItem(index) {
    this.items.splice(index, 1)
  },
  saveEdit() {
    if (this.editIndex !== null) {
      this.items[this.editIndex].project = this.editProject
      this.items[this.editIndex].description = this.editDescription
      this.items[this.editIndex].remark = this.editRemark
      this.isEditing = false
      this.editIndex = null
    }
  },
  cancelEdit() {
    this.isEditing = false
    this.editIndex = null
  }
}
}
</script>

<style scoped>
.template {
position: relative; /* 确保模板是相对定位的 */
width: 100%;
margin: 0 auto;
margin-bottom: 42px;
background-color: aliceblue;
}

table {
width: 100%;
border-collapse: collapse;
margin-bottom: 60px;
}

th,
td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}

th {
background-color: #f2f2f2;
}

/* 修改表单的样式 */
.edit-form {
position: absolute; /* 使用绝对定位 */
top: 50px; /* 根据需要调整 */
left: 50%;
transform: translateX(-50%); /* 居中显示 */
z-index: 1000; /* 确保表单在最上层 */
background-color: white;
padding: 20px;
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.edit-form input,
.edit-form textarea {
width: 100%;
margin-bottom: 10px;
}

.edit-form button {
margin-right: 10px;
}
</style>
